<template>
  <el-container>
    <el-main>
      <div class="top">
        <span class="el-icon-arrow-left" @click="goback"></span> 
      </div>
      <div class="searchBox">
        <div>
          <i class="el-icon-search" @click="search"></i>
          <input type="text" v-model="protext">
        </div>
        <ul>
          <li>综合</li>
          <li>销量</li>
          <li>价格
            <div>
              <span class="el-icon-arrow-up"></span>
              <span class="el-icon-arrow-down"></span>
            </div>
          </li>
        </ul>
      </div>
    </el-main>
    <el-main>
      <ul class="productList">
        <li v-for="v in list">
          <img :src="$baseUrl+v.product_p" alt="">
          <h5>{{v.name}}</h5>
          <div>
            <span>￥{{v.newprice}}</span>
            <span class="el-icon-shopping-cart-full"></span>
          </div>
        </li>
        <li  v-for="v in allProduct" v-show="detail">
          <img :src="$baseUrl+v.product_p" alt="">
          <h5>{{v.name}}</h5>
          <div>
            <span>￥{{v.newprice}}</span>
            <span class="el-icon-shopping-cart-full"></span>
          </div>
        </li>
      </ul>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>
<script>
export default {
  name:'search',
  data(){
    return {
      protext:"",
      list:[],
      allProduct:[],
      detail:true
    }
  },
  methods:{
    goback(){
      this.$router.go(-1);
    },
    search(){
      this.detail= false;
      this.$http.post("api/users/proserach",{name:this.protext}).then(data=>{
            if(data.data.errCode==0){
                this.list = data.data.products;
            }
      })
    }
  },
  beforeCreate(){
    this.$http.post("api/users/getAll").then(data=>{
      if(data.data.errCode==0){
        this.allProduct=data.data.allProduct;
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.elcontainer{
  background-color: #f7f7f7;
}
  .el-main:nth-child(1){
     padding:0 !important;
     .top{
       width: 100%;
       height: 50px;
       border-bottom: 2px solid lightgray;
       span{
        font-weight: bolder;
        font-size: 20px;
        line-height: 50px;
        padding-left: 10px;
       }
     }
     .searchBox{
       margin-top: 10px;
       height: 90px;  
       >div{
         background-color: #f0f0f0;
         width: 300px;
         margin: 0 auto;
         border-radius: 20px;
        
         height: 40px;
         box-sizing: border-box;
         >i,input{
           font-size: 18px;
         }
         i{
           line-height: 38px;
           margin-left: 10px;
         }
         input{
           width: 255px;
           height: 35px;
           border-radius: 5px;
           background-color: #f0f0f0;
           border: none;
           outline: none;
         }

       }
       ul{
         width: 100%;
         height: auto;
         padding-top: 15px;
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         li{
           font-size: 18px;
           font-weight: bold;
           &:nth-child(3){
             position: relative;
             div{
               position: absolute;
               top: 0px;
               right: -25px;
               width: 20px;
               height: 30px;
              
               >span{
                 font-size: 10px;
                 font-weight: bold;
                 padding: 0;
                 display: block;
                 height: 12px;
               }
             }
           }
         }
       }
     }
  }
  .el-main:nth-child(2){
    box-sizing: border-box;
    padding: 0 !important;
    background-color: #f0f0f0;
    width: 100%;
    height: auto;
    >ul.productList{
      min-height: 550px;
      padding: 20px 20px;
      box-sizing: border-box;
      li{
        background-color: #fff;
        height: 120px;
        width: 100%;
        flex: 0 1 auto;
        box-sizing: border-box;
        margin-bottom: 10px;
        border-radius: 7px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        justify-content: space-around;
        >div{
          position: absolute;
          bottom: 15px;
          overflow: hidden;
          margin-left: 40px;
          >span{
            font-size: 18px;
            color: #ff4716;
            margin-left: 80px;
          }
        }
        h5{
          line-height: 40px;
          font-size: 16px;
          text-align: center;
        }
        img{
          width: 105px;
          height: 105px;
          margin: 7px 3px 3px;
        }
      }
    }
  }
  .el-footer{
    height: 0px !important;
  }
</style>